<script setup>
import {onMounted, ref} from 'vue';
import {message} from "ant-design-vue";
import jumpHelper from "@/js/pageJumper";

const mode = ref(0);
const changePageLocked = ref(false)
const changeMode = (newMode)=>{
  if (!changePageLocked.value){
    changePageLocked.value = true;
    switch (newMode){
      case 0:
        jumpHelper.jumpToTakeTaskPage();
        mode.value = 0;
      break;
      case 1:
        jumpHelper.jumpToNewTaskPage();
        mode.value = 1
      break;
      case 2:
        jumpHelper.jumpToAccountPage();
        mode.value = 2;
      break;
    }
    setTimeout(()=>{
      changePageLocked.value = false;
    },410)
  }else{
    message.warn('点击太快啦！')
  }
}
onMounted(()=>{

})
</script>

<template>
  <div>
    <div class="child-tabbar-container">
      <div @click="changeMode(0)" class="tabbar-self" :class="mode === 0 ? 'chosen-tabbar' : 'unchosen-tabbar'">
        <img :style="mode === 0 ? 'opacity:1; transition: 0.8s' : 'opacity:0; transition: 0.8s'" src="@/assets/tabbar_customer.png">
        <h1>发现好物</h1>
      </div>
      <div @click="changeMode(1)" class="tabbar-self" :class="mode === 1 ? 'chosen-tabbar' : 'unchosen-tabbar'">
        <img :style="mode === 1 ? 'opacity:1; transition: 0.8s' : 'opacity:0; transition: 0.8s'" src="@/assets/tabbar_deliver.png">
        <h1>我的闲置</h1>
      </div>
      <div @click="changeMode(2)" class="tabbar-self" :class="mode === 2 ? 'chosen-tabbar' : 'unchosen-tabbar'">
        <img :style="mode === 2 ? 'opacity:1; transition: 0.8s' : 'opacity:0; transition: 0.8s'" src="@/assets/tabbar_account.png">
        <h1>购物车</h1>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .child-tabbar-container{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 220px;
    width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .tabbar-self{
    height: 64px;
    width: 100%;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tabbar-self img{
    height: 60%;
    transform: translateY(-4%);
  }
  .tabbar-self h1{
    font-size: 20px;
    margin-bottom: 0;
    font-weight: bold;
    color: white;
    user-select: none;
  }
  .chosen-tabbar{
    background-color: #9cb1ea;
    transition: .4s;
    user-select: none;
  }
  .unchosen-tabbar{
    background-color: #b8c3e0;
    transform: translateX(-30%);
    cursor: pointer;
    transition: .4s;
    user-select: none;
  }
  .unchosen-tabbar:hover{
    background-color: #9994e1;
  }
</style>